class LoginS {
    constructor() {
        this.pwd = '';
        this.user = '';
        this.i = false;
        this.a = document.querySelector('.leg').nextElementSibling
        document.querySelector('.leg').onmouseover = this.mouseOverFn.bind(this);
        document.querySelector('.leg').onmouseout = this.mouseOutFn.bind(this);
        document.querySelector('.erweima').onmouseover = this.focusFn.bind(this)
        document.querySelector('.erweima').onmouseout = this.eFn
        this.pwdObj = document.querySelector('#pwd')
        this.pwdObj.onblur = this.pwdFn
        this.userObj = document.querySelector('#user')
        this.userObj.onblur = this.userFn
        document.querySelector('#card-delu').onclick = this.btnClickFn
        this.cardInput = document.querySelectorAll('.card-input')
        this.inputClick()
    }
    inputClick() {
        this.cardInput.forEach((v) => {
            v.addEventListener('click', function () {
                v.style.border = '1px solid #ff5c00'
                v.style.backgroundColor = "rgba(252,242,243)"
            })
        })
    }
    btnClickFn() {
        this.pwd = document.querySelector('#pwd').value
        this.user = document.querySelector('#user').value
        let data = localStorage.getItem('userName')
        let offon=false
        if (this.pwd && this.user) {

            let userName = {
                user: this.user,
                pwd: this.pwd

            }
            if (data) {
                data = JSON.parse(data)
                data.forEach((v)=>{
                    if(v.user==this.user){
                        layer.msg('用户名重复',{
                            time:3000
                        })
                        offon=true
                    }else{
                        offon=false
                    }
                })
                if(!offon){ 
                    data.push(userName)
                    localStorage.setItem('userName', JSON.stringify(data))
                    layer.msg('注册成功', {
                        time: 3000
                    });}
               
            } else {
                let datas = [userName]
                localStorage.setItem('userName', JSON.stringify(datas))
            }


            window.location.href = 'http://127.0.0.1:5500/xiaomiyoupin/login.html'
        } else {
            layer.msg('请输入账号');
        }
    }
    pwdFn() {
        this.pwd = this.value
        let spanObj = this.parentNode.nextElementSibling
        if (!this.pwd) {
            spanObj.style.opacity = '1'
        } else {
            this.parentNode.style.border = '0'
            this.parentNode.style.backgroundColor = "#f9f9f9"
        }
    }
    userFn() {
        this.user = this.value
        let spanObj2 = this.parentNode.nextElementSibling
        if (!this.user) {
            spanObj2.style.opacity = '1'
        } else {
            this.parentNode.style.backgroundColor = "#f9f9f9"
            this.parentNode.style.border = '0'
        }
    }
    eFn() {
        document.querySelector('.erweima').style.opacity = 0.4;
        document.querySelector('.erweima .e').style.display = 'none'
    }
    focusFn() {
        this.i = false
        document.querySelector('.erweima').style.opacity = 1;
        document.querySelector('.erweima .e').style.display = 'block'
        //    let tips=document.createElement('div')
        //    tips.style.backgroundColor='#ff5c00'
        //    tips.style.color='white'
        //    tips.style.width='60px'
        //    tips.style.position='absolute'
        //    tips.style.top='-10px'
        //    tips.style.right='16px'
        //    tips.innerHTML='扫码登录'
        //    document.querySelector('.erweima').appendChild(tips)


    }
    mouseOverFn() {
        // console.log(1);
        this.a.style.display = 'block'
        document.querySelector('.leg').style.color = '#ff5c00'
    }
    mouseOutFn() {
        // console.log(2);
        this.a.style.display = 'none'
        document.querySelector('.leg').style.color = '#838383'
    }

}
new LoginS